<template>
  <div class="wrap">
    <div class="recharge-log">
      <div class="header-card">
        <div class="left">
          <div class="avatar">
            <img :src="business.avatar" alt="" class="">
          </div>
          <div class="user">
            <div class="user-text-1">
              Hello，{{business.name}}
            </div>
            <div class="user-text-2">
              感谢您使用{{getAppName()}}
            </div>
          </div>
        </div>
        <div class="right">
          <div class="text1">当前余额（元）：</div>
          <div class="text2">{{ $store.getters.amount }}</div>
          <div class="text3">预计剩余代贴单数：{{ $store.getters.stickerNum}}</div>
        </div>
      </div>
      <div class="recharge-content">
        <div class="recharge-header">
          <div style="font-size: 14px;font-weight: bold">
            已绑定店铺（{{data.length}}）
          </div>
        </div>
        <div class="table">
          <el-table
            border
            :data="data"
            v-loading="loading"
          >
            <el-table-column
              prop="nickname"
              label="店铺名称"
              align="center"
            >
              <template slot-scope="{row}">
                <diy-link @click="showInfo(row)"> <span style="font-size: 12px">{{row.nickname}}</span></diy-link>
              </template>
            </el-table-column>
            <el-table-column
              prop="remarkName"
              label="自定义名称"
              align="center"
            >
              <template slot-scope="{row}">
                {{row.remarkName || '-'}}
              </template>
            </el-table-column>
            <el-table-column
              prop="stickerOrderNum"
              label="代贴单数"
              align="center"
            >
              <template slot-scope="{row}">
                {{ attrNumber(row.stickerOrderNum) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="绑定时间"
              align="center"
            >
              <template slot-scope="{row}">
                <template v-if="row.syncData">
                  {{row.createTime}}
                </template>
                <template v-else>
                  采集中
                </template>
              </template>
            </el-table-column>
            <el-table-column
              prop="aliData"
              label="1688账号"
              align="center"
              show-overflow-tooltip
            >
              <template>
                <template v-if="aliData.length === 0">
                  未绑定
                </template>
                <template v-else>
                  <template v-for="(ali,key) in aliData">
                    {{ali.resourceOwner}}
                    <template v-if="key + 1 !== aliData.length">、</template>
                  </template>
                </template>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
            >
              <template slot-scope="{row}">
                <el-button @click="showInfo(row)" type="primary">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="mgt20">
          <el-button type="primary" @click="bindMoreAccount" v-if="this.data.length < 20">绑定更多店铺</el-button>
          <el-button type="1688" @click="bindMore1688">授权更多1688账号</el-button>
        </div>
      </div>
    </div>

    <el-dialog
      :visible.sync="dialogForm"
      width="800px"
      title="店铺详情"
    >
      <el-form
        ref="accountForm"
        :model="currentRow"
        label-width="150px"
      >
        <el-form-item
          label="店铺名称"
          prop="nickname"
        >
          {{ currentRow.nickname }}
        </el-form-item>
        <el-form-item
          label="自定义店铺名称"
          prop="password"
        >
          <el-input v-model="currentRow.remarkName"></el-input>
          <span class="tips" style="color: #FC6347">自定义店铺名称将优先显示于系统各处，支持中文</span>
        </el-form-item>
        <el-form-item
          label="绑定时间"
          prop="createTime"
        >
          {{ currentRow.createTime }}
        </el-form-item>
        <el-form-item
          label="累计代贴单数"
          prop="createTime"
        >
          {{ currentRow.stickerOrderNum }}
        </el-form-item>
        <el-form-item
          label="已授权1688账号"
          prop="aliData"
        >
          <div
            v-for="ali in aliData"
            :key="ali.id"
          >
            {{ali.resourceOwner}}
          </div>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" :disabled="checkDisable()" @click="submitForm()" :loading="diaFormLoading">保 存</el-button>
          <el-button size="small" @click="dialogForm = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      class="auth-dialog"
      :visible.sync="dialogCollect"
      width="800px"
    >
      <div class="content" >
        <div class="img">
          <img src="@/assets/images/collect.png" alt="" >
        </div>
        <div>
          <p>数据正在加载中……</p>
          <p>如果店铺数据量较大，需要较长时间，请耐心等待</p>
          <p>您可以关闭此窗口，系统将在数据加载完后自动更新</p>
          <el-progress style="margin-top: 10px" :text-inside="true" :stroke-width="26" :percentage="collectRow.percentage"></el-progress>
        </div>
        <div class="country-list">
          <el-button class="country-button">
            <div class="button-content">
              <img class="country-img" style="" src="@/assets/images/country/mx.png" alt=""/>
              墨西哥
            </div>
          </el-button>
          <el-button class="country-button">
            <div class="button-content">
              <img class="country-img" style="" src="@/assets/images/country/br.png" alt=""/>
              巴西
            </div>
          </el-button>
          <el-button class="country-button">
            <div class="button-content">
              <img class="country-img" style="" src="@/assets/images/country/cl.png" alt=""/>
              智利
            </div>
          </el-button>
          <el-button class="country-button">
            <div class="button-content">
              <img class="country-img" style="" src="@/assets/images/country/co.png" alt=""/>
              哥伦比亚
            </div>
          </el-button>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {editAccount, getAccountList, getAccountPercentage} from "@/api/business";
import {getAppName} from "@/utils/settings";
import {attrNumber} from "@/utils/common";
import {deepCopy} from "@/utils";
import {mkdAuth} from "@/utils/auth";
export default {
  name: "accountAuth",
  components:{
  },
  computed:{
    data(){
      const data = [];
      this.tableData.forEach(item=>{
        data.push(item)
      })
      return data;
    }
  },
  data(){
    return {
      business:{
        avatar: '',
        account: '',
        name: '',
      },
      loading: false,
      diaFormLoading: false,
      dialogCollect: false,
      dialogForm: false,
      accountNum: 0,
      avatar: '',
      tableData:[],
      getAppName,
      currentRow:{
        id: '',
        accountId: '',
        nickname: '',
        remarkName: '',
        stickerOrderNum: '',
        syncData: '',
        createTime: '',
      },
      collectRow:{
        accountId: '',
        percentage: 0,
      },
      aliData: [],
    }
  },
  created() {
    this.getData();
    setInterval(()=>{
      if(this.dialogCollect){
        this.loopPercentage();
      }
    },3000);
  },
  methods:{
    attrNumber,
    getData(){
      this.business.avatar = this.$store.getters.avatar
      this.business.name = this.$store.getters.name
      this.loading = true
      getAccountList().
        then(res=>{
          this.loading = false
          this.tableData = res.data
          this.aliData = res.info.aliData;
      })
    },
    showInfo(row){
      // 如果采集完成了 显示对应的详情 否则显示采集进度
      if(row.syncData){
        this.currentRow = deepCopy(row)
        this.dialogForm = true
      }else{
       this.collectRow.accountId = row.accountId;
       this.collectRow.percentage = 0;
       this.loopPercentage();
       this.dialogCollect = true;
      }
    },
    checkDisable(){
      const obj = this.data.find(item => item.id === this.currentRow.id)
      return JSON.stringify(obj) === JSON.stringify(this.currentRow)
    },
    // 提交修改店铺名称
    submitForm(){
      this.$refs.accountForm.validate(valid=>{
        if(valid){
          const postData = this.currentRow;
          this.diaFormLoading = true;
          editAccount(postData).then(res=>{
            this.diaFormLoading = false;
            if(res.error === 0){
              this.dialogForm = false;
              this.$successMessage(res.message)
              this.getData()
            }else{
              this.$errorMessage(res.message)
            }
          })
        }
      })
    },
    // 循环去请求进度
    async loopPercentage(){
      await getAccountPercentage(this.collectRow.accountId).then(res=>{
        this.collectRow.percentage = res.data.progress
        if(this.collectRow.percentage >= 100){
          // 如果授权完成 刷新当前页面
          this.$router.go(0)
        }
      })
    },
    // 绑定更多店铺
    bindMoreAccount(){
      mkdAuth()
    },
    // 绑定更多的1688账号
    bindMore1688(){
      window.open(this.$store.getters.auth1688Url ,'_blank')
    }
  }
}
</script>
<style lang="scss">

</style>

<style scoped lang="scss">

.wrap{
  padding:20px 30px;
  min-height: calc(100vh - 100px);
  background: #fafafb;
  .recharge-log{
    width: 1000px;
    min-height: calc(100vh - 100px);
    padding: 20px 50px;
    background:#ffffff;
  }
}
.header-card{
  width: 100%;
  height: 80px;
  border: 1px solid #d7d7d7;
  border-radius: 3px;
  .left{
    float: left;
    .avatar{
      float: left;
      margin-left: 10px;
      margin-top: 10px;
      img{
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 50%;
      }
    }
    .user{
      font-size: 14px;
      margin-top: 10px;
      margin-left: 20px;
      float: left;
      line-height: 30px;
      .user-text-1{
        font-weight: 500;
      }
    }
  }
  .right{
    float: right;
    height: 100%;
    padding: 5px 10px;
    background: #ff7d0a;
    border-radius: 3px;
    border: 1px solid #ff7d0a;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .text1{
      font-weight: 650;
      font-size: 14px;
    }
    .text2{
      font-weight: 700;
      font-size: 19px;
    }
    .text3{
      font-weight: 400;
      font-size: 11px;
    }
  }
}
.recharge-content{
  margin-top: 20px;
  .recharge-header{
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
  }
}


.auth-dialog{
  .content{
    margin: 0 auto;
    width: 600px;
    padding: 30px 0;
    .img{
      text-align: center;
    }
    p{
      margin: 0;
      padding: 0;
      line-height: 20px;
      font-weight: 650;
      color: #1E3369;
      font-size: 13px;
      text-align: center;
    }
  }

}
.country-list{
  display: flex;
  justify-content: center;
  margin-top: 20px;
  .country-button{
    padding: 5px 15px;
    .button-content{
      display: flex;
      align-items: center;
      .country-img{
        display: inline;
        width: 20px;
        line-height: 30px;
        margin-right: 5px;
      }
    }
  }
}
</style>
